<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>形状图</title>
    <style>
        .container {
            border: 1px solid palegreen;
            display: inline-grid;
            grid-template-columns: repeat(20, 30px);
            grid-template-rows: repeat(20, 30px);
        }
        .item {
            height: 100%;
            width: 100%;   
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid royalblue;
            background: paleturquoise;
        }
        .item:hover {
            transform: scale(1.1, 1.1);
            transition-duration: 0.5s;
        }
        .spot {
            height: 80%;
            width: 80%;
            border-radius: 50%;  
            background: red;
        }
        .spot_black {
            background: black;
        }
        .spot_white {
            background: white;
        }
    </style>
</head>
<body>
    <div class="container">

    </div>

    <script>
        var white = [],
            black = [],
            who = 0; // 0：黑棋 / 1：白棋

        window.onload = function() {
            createEle(20, 20);
            listener('container');
        }

        function createEle(rows, columns) {
            let eleStr = '',
                times = 1,
                i = 1,
                v = 1;
            for (i = 1; i <= rows; i++) {
                for (v = 1; v <= columns; v++) {
                     eleStr += `<div class="item" row="${i}" column="${v}"></div>`;
                }
            }
            document.getElementsByClassName('container')[0].innerHTML = eleStr;
        }

        function listener(eleClass) {
            document.getElementsByClassName(eleClass)[0].addEventListener('click', (event) => {
                var event = event || window.event;
                var target = event.target;
                if (target.innerHTML == '' && target.getAttribute('class') == 'item') {
                    let color = who === 0 ? 'spot_black' : 'spot_white',
                        // 获取坐标，推入对应选手的数组
                        y = parseInt(target.getAttribute('row')),
                        x = parseInt(target.getAttribute('column')),
                        result;
                    if (who === 0) {
                        black.push({x, y});
                    } else {
                        white.push({x, y});
                    }
                    target.innerHTML = `<div class="spot ${color}"></div>`;
                    // 检查结果
                    checkResult();
                    // 棋手轮换
                    who = who === 0 ? 1 : 0;
                }
            }, false)
        }

        // core code
        // 判断四个大方向，当连续的数目大于或等于5时，则算胜利
        function checkResult() {
            let player, // 选手棋子的记录
                point, // 最后一步的坐标
                name; 

            if (who === 0) {
                player = black;
                name = '黑方棋手';
            } else {
                player = white;
                name = '白方棋手';
            }

            point = player[player.length - 1];

            if (algorithm(point, player, 'row')) {
                alert(`${name}胜利`);
                clear();
            } else if (algorithm(point, player, 'column')) {
                alert(`${name}胜利`);
                clear();
            } else if (algorithm(point, player, 'tangent')) { 
                alert(`${name}胜利`);
                clear();
            } else if (algorithm(point, player, 'negative')) { 
                alert(`${name}胜利`);
                clear();
            }
        }

        // 检测水平或垂直方向是否胜利
        function algorithm(point, player, direction) {
            let position, times = 0;

            // 判断正方向
            for (let i = 1; i <= 4; i++) {
                // 下一个点的坐标
                if (direction === 'row') {
                    position = {
                        x: point.x + i,
                        y: point.y
                    }
                } else if (direction === 'column'){
                    position = {
                        x: point.x,
                        y: point.y - i
                    }
                } else if (direction === 'tangent') {
                    position = {
                        x: point.x + i,
                        y: point.y - i
                    }
                } else if (direction === 'negative') {
                    position = {
                        x: point.x + i,
                        y: point.y + i
                    }
                } else {

                }
                // console.log(player)
                console.log(position)
                // 选手的坐标中是否能连成线
                if (JSON.stringify(player).indexOf(JSON.stringify(position)) !== -1) {
                    times += 1;
                    console.log(times)
                } else {
                    break;
                }
            }
            if (times === 4) {
                return true; 
            }

            // 判断负方向
            for (let i = 1; i <= 4; i++) {
                if (direction === 'row') {
                    position = {
                        x: point.x - i,
                        y: point.y
                    }
                } else if (direction === 'column'){
                    position = {
                        x: point.x,
                        y: point.y + i
                    }
                } else if (direction === 'tangent') {
                    position = {
                        x: point.x - i,
                        y: point.y + i
                    }
                } else if (direction === 'negative') {
                    position = {
                        x: point.x - i,
                        y: point.y - i
                    }
                }
                // 选手的坐标中是否能连成线
                if (JSON.stringify(player).indexOf(JSON.stringify(position)) !== -1) {
                    times += 1;
                } else {
                    break;
                }
            }

            if (times >= 4) {
                return true; 
            } else {
                times = 0; // 清空，便于下一步判断
                return false;
            }
        }


        // 清空棋局
        function clear() {
            window.location.reload()
        }
    </script>
</body>
</html>